import VueRouter from "vue-router"
import HeBei from '../pages/HeBei'
import HeNan from '../pages/HeNan'
import City from '../pages/City'

const router = new VueRouter({
    routes : [
        {
            name : 'bei',
            path : '/hebei',
            component : HeBei,
            children : [
                {
                    name : 'shi',
                    path : 'sjz/:a1/:a2/:a3',
                    component : City,
                    props : true,
                    // 带有这个属性的，并且值是true，表示该路由是需要鉴权的。
                    meta : { 
                        isAuth : true,
                    },
                },
                {
                    name : 'han',
                    path : 'hd/:a1/:a2/:a3',
                    component : City,
                    props : true,
                    meta : { 
                        isAuth : true ,
                    }
                },
            ]
        },
        {
            name : 'nan',
            path : '/henan',
            component : HeNan,
        }
    ]
})

// 全局前置路由守卫
// 1. 代码写到哪里？在创建好router之后，以及暴露router之前
// 2. beforeEach中的callback什么时候被调用呢？在初始化的时候执行一次，以后每一次在切换任意路由组件之前都会被调用。
// 3. callback可以是普通函数，也可以是箭头函数
// 4. callback函数有三个参数：to from next
// 5. from参数：from是一个路由对象，表示从哪来（从哪个路由切过来的），起点。
// 6. to参数：to也是一个路由对象，表示到哪儿去，重点
// 7. next参数：这是一个函数，调用这个函数之后，表示放行，可以继续向下走。
// 8. 给路由对象添加自定义属性的话，需要在路由对象的meta（路由元）中定义。
router.beforeEach((to, from, next) => {
    // 假设当前登录的用户是：
    let loginName = 'zhangsan'
    // 目前来说只有shi和han这两个路由需要鉴权。
    // 如果当前项目中需要鉴权的路由比较多，这里的代码会比较繁琐，比较冗余。
    // 怎么解决？
    //if(to.name === 'shi' || to.name === 'han'){
    if(to.meta.isAuth){
        if(loginName === 'admin'){
            // 放行
            next()
        }else{
            alert('对不起，您没有权限！')
        }
    }else{
        //document.title = to.meta.title
        // 放行
        next()
    }
}) 

export default router